<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>培训试题</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>

    <style>
        ol, ul, li {
            list-style: none;
        }

        .tijiaoBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #2a8cec;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            z-index: 9999;
        }

        .tijiaoBtn div {
            float: left;
            width: 50%;
        }

        .tijiaoBtn div.ok {
            border-right: 1px solid #ddd;
        }

        .tijiaoBtn div.nook {
            border-left: 1px solid #ddd;
        }

        .question {
            margin-bottom: 12px;
            border-radius: 4px;
            background-color: #ffffff;
            border: solid 1px #f5f5f3;
            /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);*/
            position: relative;
            overflow: visible;
            color: #484848;
            text-align: left;
        }

        .question .q_content {
            padding: 0px;
        }

        .question .q_content .q_title_wrap {
            position: relative;
            width: 100%;
        }

        .question .q_content .q_title_wrap .q_seq {
            position: absolute;
            left: 10px;
            top: 7px;
            font-size: 15px;
            color: #484848;
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .q_title_wrap .q_title {
            /*padding: 6px 10px;*/
            font-size: 15px;
            width: 100%;

        }

        .question .q_content .q_option_ul {
            padding-right: 184px;
        }

        .question .q_content .q_option_ul > li {
            margin: 10px 0 0;
            padding: 3px 0 0 40px;
            position: relative;
            box-sizing: border-box;
        }

        .question .q_content .q_option_list {
            margin: 6px 0 0 16px;
        }

        .lookTitle {
            height: 20px;
            line-height: 20px;
            /* font-size: 20px; */
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .icon_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 4px;
            left: 24px;
        }

        .question .q_content .icon_active_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            /*background-color: #0076FF;*/
            background: url("/dist/img/duigou2.png") -2px center no-repeat;

            position: absolute;
            top: 4px;
            left: 24px;
        }

        .question .q_content .q_option_ul > li .option_title {
            /*padding: 5px 10px 5px 5px;*/
            font-size: 16px;
            line-height: 1.43;
            min-height: 20px;
            word-wrap: break-word;
        }

        .questionNum {
            font-size: 16px;
            padding-top: 1px;
            width: 20px;
            display: block;
            float: left;
            /*padding-left: 5px;*/
        }

        .cz {
            position: absolute;
            right: 0;
            top: 0;
        }

        .cz div {
            float: left;
            width: 50px;
            text-align: center;
            color: #2b669a;
        }

        .cz .romove {
            color: red;
        }

        html, body, #pdf_viewer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: white;
        }

        .content {
            padding: 10px 10px;
        }

        .question .q_content .icon_active_check {
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            background: url("/dist/img/duigouCheck.png") -1px center no-repeat;
            position: absolute;
            top: 6px;
            left: 7px;
        }

        .question .q_content .icon_check {
            width: 20px;
            height: 20px;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 4px;
            left: 7px;
        }

        .questionType {
            position: absolute;
            top: 9px;
            left: 7px;
            font-size: 12px;
        }

        .content {
            padding: 10px 10px;
            padding-bottom: 0;
        }

        .dlgLogo {
            width: 98%;
            z-index: 99999;
            position: fixed;
            transition: .2s;
            left: -100%;
            bottom: 180px;
            display: none;

        }

        .bj {
            position: fixed;
            height: 100%;
            width: 100%;
            left: 0%;
            top: 0%;
            z-index: 9998;
            background-color: rgba(0, 0, 0, 0.7);
            display: none;
        }

        .touBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #2a8cec;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            margin: 0 auto;
            z-index: 11111;
        }

        .touBtn div {
            float: left;
            width: 50%;
            box-sizing: border-box;
            font-size: 16px;
        }

        .touBtn .line {
            height: 24px;
            width: 1px;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 13px;
        }
    </style>
</head>
<body>
<section class="content" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div class="module question question_focus" v-for="(item,i) in info.questionList"
         :style="i==info.questionList.length-1?'margin-bottom: 60px;':''">
        <div class="q_content_wrap">
            <div class="q_content">
                <div class="q_title_wrap">
                    <div class="questionType">
                    </div>
                    <div class="q_seq">{{i+1}}、</div>
                    <div class="content_editable editable_focus"
                         style="padding-top: 7px;padding-left: 30px;">
                        <span class="aa q_title"
                              style="height: 20px;line-height:20px;font-size: 15px;">{{item.content}}</span>
                    </div>
                </div>
                <div class="q_option_list" v-if="item.type==0">
                    <ul class="q_option_ul ui-sortable"
                        style="padding-left: 10px;padding-right: 10px;">
                        <li class="option_item" v-for="(item2,j) in item.optionList"
                            @click="checkOne(i,j)">
                            <div class="option_title_wrap">
                                <div class="content_editable ui-sortable-handle"
                                     v-if="item2.content"
                                     style="display: flex">
                                    <i :class="item2.answer == 1?'icon_wj icon_active_radio':'icon_wj icon_radio'"></i>
                                    <span class="questionNum">{{changeNum(j)}}、</span>
                                    <span class="aa option_title"
                                          style="width: 60%;margin-left: 10px;border: none;padding-top: -1px;">{{item2.content}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="q_option_list" v-else>
                    <ul class="q_option_ul ui-sortable"
                        style="padding-left: 10px;padding-right: 10px;">
                        <li class="option_item" v-for="(item2,j) in item.optionList"
                            @click="checkBox(i,j)">
                            <div class="option_title_wrap">
                                <div class="content_editable ui-sortable-handle">
                                    <i :class="item2.answer == 1?'icon_wj icon_active_check':'icon_wj icon_check'"></i>
                                    <span class="questionNum">{{changeNum(j)}}、</span>
                                    <!--<input type="text" class="aa option_title" v-if="pageType=='edit'"-->
                                    <!--style="width: 60%;margin-left: 10px;border: none;border-bottom: 1px solid #cbcbcd;"-->
                                    <!--v-model="item2.content">-->
                                    <span
                                            class="spanOptionInput" style="font-size: 16px;">{{item2.content}}
                                    </span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <!--<div style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;margin-bottom: 15px">
        <input type="button" value="提交" @click="save()" class="btn oaBtn btn-sm"
               style="margin-top:5px;">
    </div>-->
    <div class="bj"></div>
    <img src="/dist/img/dlgWTG.png" alt="" class="dlgLogo dlgWTG">
    <img src="/dist/img/dlgTG.png" alt="" class="dlgLogo dlgTG">

    <!--<div class="tijiaoBtn" @click="save()" v-if="type=='1'">提交</div>
    <template v-else-if="type=='2'">
        <div class="tijiaoBtn">
            <div class="ok" @click="jxdt">继续答题</div>
            <div class="nook" @click="tcdt">重新阅读</div>
        </div>
    </template>
    <template v-else-if="type=='3'">
        <div class="tijiaoBtn" @click="tg">确定</div>
    </template>-->

    <div class="touBtn" v-if="type=='1'">
        <div style="width: 100%;" @click="save()">提交</div>
    </div>
    <div class="touBtn"  v-else-if="type=='2'" >
        <div @click="jxdt">继续答题</div>
        <div @click="tcdt">重新阅读</div>
        <i class="line"></i>
    </div>
    <div class="touBtn" v-else-if="type=='3'">
        <div style="width: 100%;" @click="tg()">确定</div>
    </div>

</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oaApp.js?t=558d0414"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    $.ajaxSetup({
        global: true,
        type: "POST",
        cache: false,
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        beforeSend: function () {
        },
        complete: function () {

        },
        error: function (e) {
            alert('error' + e.responseText);
        }
    });
    $.extend($.wyui, {
        page: {
            urlParams: null,
            queryParams: {
                requestPage: 1,
                pageSize: 30
            },
            dataUrl: '',
            createQueryParams: function () {
            },
            getByPage: function (type) {
                $.ajax({
                    url: $.wyui.page.dataUrl,
                    data: JSON.stringify($.wyui.page.queryParams),
                    beforeSend: function () {

                    },
                    complete: function () {
                    },
                    success: function (r) {
                        $.wyui.page.queryParams.requestPage++;

                        if (r.data.sendData.pager && r.data.sendData.pager.pageCount == 0) {
                            r.data.sendData.pager.pageCount = 1;
                        }
                        if (type == "scroll") {
                            $.wyui.page.getByPage_scroll_callback(r.data.sendData.records);
                        } else {
                            if ($.wyui.page.getByPage_callback_new) {
                                $.wyui.page.getByPage_callback_new(r.data.sendData.records);
                            }
                        }

                    }
                });
            }
        },
        postMethod: function (url, data, callback, sync, id) {
            if (!id) {
                id = "#app"
            }
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                    setTimeout(function () {
                    }, 1000);

                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                        JSBridge.call(UI, 'showToast', {title: r.e.desc})
                    }
                },
                error: function (e) {
                    JSBridge.call(UI, 'showToast', {title: e.responseText})
                    alert(url + e.responseText);
                }
            });
        },
    });
</script>
<script>
    function refresh() {
        location.reload();
    }

    var app = new Vue({
        el: '#app',
        data: {
            type: '1',
            pageType: 'look',//页面类型
            mainAnswer: {
                answer: '',
                fraction: 0,
            },
            userId: getUrlParamObj().userId,

            info: {
                id: getUrlParamObj().id,

                questionList: []
            }
        },
        methods: {
            see: function () {
                var that = this;
                top.$.dialog({
                    content: 'url:/page/exam/create.html?mainId=' + that.info.id + '&pageType=' + 'look' + '&goback=' + 0 + '&readResult=readResult',
                    title: '查看答题',
                    width: 904,
                    height: 570,
                    max: true,
                    min: true,
                    lock: true,
                });
            },
            checkBox: function (i, j) {
                if (this.info.questionList[i].optionList[j].answer == "1") {
                    this.info.questionList[i].optionList[j].answer = "0"
                } else {
                    this.info.questionList[i].optionList[j].answer = "1"
                }
            },
            changeNum: function (num) {
                var letter = 1;
                switch (num) {
                    case 0:
                        letter = 'A';
                        break;
                    case 1:
                        letter = 'B';
                        break;
                    case 2:
                        letter = 'C';
                        break;
                    case 3:
                        letter = 'D';
                        break;
                    default :
                        break;
                }
                return letter
            },
            addRow: function (i) {
                var that = this;
                var question = {
                    "content": "",
                    "fraction": 5,
                    "type": "0",
                    "optionList": [
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"}
                    ]
                }
                this.info.questionList.splice(i + 1, 0, question);
            },
            delRow: function (i) {
                if (this.info.questionList && this.info.questionList.length > 1) {
                    this.info.questionList.splice(i, 1);
                } else {
                    alert("请保留最少一道题目")
                }
            },
            showDialogDaTi: function () {
                this.type = '2';
                $(".bj").show();
                $(".dlgWTG").show();
                $(".dlgWTG").animate({left: '0'}, 100);


            },
            checkOne: function (i, j) {
                for (var z = 0; z < this.info.questionList[i].optionList.length; z++) {
                    if (z != j) {
                        this.info.questionList[i].optionList[z].answer = "0"
                    } else {
                        if (this.info.questionList[i].optionList[z].answer == "1") {
                            this.info.questionList[i].optionList[z].answer = "0"
                        } else {
                            this.info.questionList[i].optionList[z].answer = "1"
                        }
                    }
                }
            },
            save: function () {
                var that = this;


                for (var i = 0; i < that.info.questionList.length; i++) {
                    var flag = true;
                    for (var j = 0; j < that.info.questionList[i].optionList.length; j++) {
                        if (that.info.questionList[i].optionList[j].answer == '1') {
                            flag = false;
                        }
                    }
                    if (flag) {
                        var param = {
                            title: "请回答第" + (i + 1) + "道题"
                        }
                        JSBridge.call(UI, 'showToast', param)
                        return
                    }
                }
                //判断正确与否
                var yn = "";//错误的题
                for (var i = 0; i < that.info.questionList.length; i++) {//题号
                    var flag = true;
                    if (that.info.questionList[i].type == 0) {
                        for (var j = 0; j < that.info.questionList[i].optionList.length; j++) {//选项号
                            if (1 == that.info.questionList[i].optionList[j].answer) {
                                that.info.questionList[i].answer = j + 1;
                            }
                            if (that.info.questionList[i].optionList[j].answer == that.info.questionList[i].optionList[j].type) {
                                if (that.info.questionList[i].optionList[j].answer == 1) {
                                    flag = false;
                                }
                            }
                        }
                    } else {
                        //拼多选题的正确答案，和自己的答案
                        var anwserDuo = "";
                        var typeDuo = "";
                        for (var j = 0; j < that.info.questionList[i].optionList.length; j++) {//选项号
                            if (1 == that.info.questionList[i].optionList[j].answer) {
                                anwserDuo = anwserDuo + j
                            }
                            if (1 == that.info.questionList[i].optionList[j].type) {
                                typeDuo = typeDuo + j
                            }
                        }
                        if (typeDuo == anwserDuo) {
                            flag = false;
                        }
                    }
                    if (flag) {
                        yn = yn + "" + (i + 1) + ","
                        that.info.questionList[i].tf = 0;// 错误  0
                    } else {
                        that.info.questionList[i].tf = 1;//正确   1
                    }
                }
                if (yn != "") {
                    yn = yn.substring(0, yn.length - 1)
                }

                console.log(yn)
                var fraction = 0.00;
                if (yn == '') {
                    fraction = 100.00;
                } else {
                    fraction = 0.00;
                }
                that.info.userId = that.userId;
                that.info.fraction = fraction;

                JSBridge.call(UI, 'showLoading', {})
                $.wyui.postMethod('/exam/saveExamDetail.json', that.info, function (data) {
                    JSBridge.call(UI, 'hideLoading')

                    if (yn == '') {
                        that.type = '3';
                        $(".bj").show();
                        $(".dlgTG").show();
                        $(".dlgTG").animate({left: '0'}, 100);

                    } else {
                        that.showDialogDaTi();

                    }
                });
            },
            tg: function () {
                //通过
                var param = {
                    backRefresh: true       //是否返回刷新
                }
                JSBridge.call(ROUTER, 'navigateBack', param)
            },
            jxdt: function () {
                //继续答题
                refresh();

            },
            tcdt: function () {
                //退出答题
                /*   var param = {
                       backRefresh: true       //是否返回刷新
                   }
                   JSBridge.call(ROUTER, 'navigateBack', param)*/

                var that = this;
                // var param = {
                //     title: '阅读材料',         //顶部标题
                //     url: '/page/exam/lookApp.html?id=' + that.info.id + '&userId=' + that.userId + '&passFlag=' + 0,
                // }
                // JSBridge.call(ROUTER, 'navigateTo', param)
                var param = {
                    id: that.info.id,
                    passFlag: 0
                }
                JSBridge.call(UI, 'showExamFile', param, function (res) {
                })
                var param = {
                    backRefresh: true,       //是否返回刷新
                }
                JSBridge.call(ROUTER, 'navigateBack', param)
            },


        },

        mounted: function () {
            var that = this;
            var data = {
                id: that.info.id,
                userId: that.userId
            }
            JSBridge.call(UI, 'showLoading', {})

            $.wyui.postMethod('/exam/getExamDetailByMainId.json', data, function (data) {

                that.info = data.main;
                JSBridge.call(UI, 'hideLoading')
            });
        }
    })
</script>

</body>
</html>